<template>
  <footer class="footer">
    <p>&copy; 2024 网上商城. 版权所有.</p>
    <p>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">浙ICP备XXXXXXX号</a> |
      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=XXXXXX" target="_blank" rel="noopener noreferrer">
        <img src="../../img/icon.jpg" alt="网警图标" class="police-icon"/> 浙公网安备 XXXXXXX号
      </a>
    </p>
  </footer>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

<style scoped>
.footer {
  background-color: #f8f9fa; /* 与header一致的轻淡背景色 */
  text-align: center;
  padding: 1rem 0;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微顶部阴影 */
}

.footer p {
  margin: 0.5rem 0;
  color: #333;
  font-size: 0.9rem;
}

.footer a {
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #0056b3;
}

.police-icon {
  width: 16px; /* 调整图标大小 */
  vertical-align: middle;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .footer {
    padding: 0.5rem 0;
  }
}
</style>